<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="./tools.js"></script>
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
    #outer{
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: orange;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
      #ulImgList{
        /* width: 3000px; */
        list-style: none;
        position: absolute;
        left: 0px;
      }
      #ulImgList li {
        float: left;
        margin: 0px 10px;
      }
      #navBar{
        height: 15px;
        position: absolute;
        left: 0px;
        bottom: 20px;

      }
      #navBar a{
        float: left;
        width: 15px;
        height: 15px;
        background-color: red;
        /*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
        border-radius: 50%;
      }
  </style>
</head>
<body>
  <div id="outer">
    <div id="imgMain">
      <!-- 图片列表 -->
      <ul id="ulImgList">
        <li><img src="../img/1.jpg"> </li>
        <li><img src="../img/2.jpg"> </li>
        <li><img src="../img/3.jpg"> </li>
        <li><img src="../img/4.jpg"> </li>
        <li><img src="../img/5.jpg"> </li>
        <li><img src="../img/1.jpg"> </li>
      </ul> 
    </div>
    <!-- 导航按钮 -->
    <div id="navBar">
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <script type="text/javascript">
  window.onload = function () {
    // 1. 设置导航栏按钮居中(别忘了加px)
    // 对于样式，只能写进去，不能读出来，读的话要有专门的函数
    var navBar = document.getElementById('navBar')
    var outer = document.getElementById('outer')
    navBar.style.left = (outer.offsetWidth-navBar.offsetWidth)/2 + 'px'
    // 获取ul列表
    var ulImgList = document.getElementById('ulImgList')
    // 获取图片列表
    var imgArr = document.getElementsByTagName('img')
    // 获取所有的超链接
    var aArr = document.getElementsByTagName('a')
    var index = 0
    // 设置ul图片列表的宽度（动态）
    ulImgList.style.width = 520*imgArr.length + 'px'
    // 设置第一个默认的导航栏颜色
    aArr[index].style.backgroundColor = 'black'



    /*
      点击超链接切换到指定的图片
        点击第一个超链接，显示第一个图片
        点击第二个超链接，显示第二个图片
      * */
    
    //2. 为所有的超链接都绑定单击响应函数

    for (var i=0;i<aArr.length;i++) {
      // 为每一个超链接绑定属性
      aArr[i].num = i
      aArr[i].onclick = function () {
        // 一旦人工干预了，就会乱套，所以，人工一旦干预，就停止计时器
        //关闭自动切换的定时器
        clearInterval(timer);
        //切换图片
        /*
          * 第一张  0 0
          * 第二张  1 -520
          * 第三张  2 -1040
          */
          index = this.num
          // 设置ul列表的左偏
          // ulImgList.style.left = -520*index + 'px'
          move(ulImgList,'left',-520*index,20,function() {
            // 人工干预结束，开启定时器
            autoChange()
          });
          // 设置导航栏颜色的变化
          setA()
        //设置选中的a
      }
    };
    // 3. 设置导航栏变化
    function setA () {
      // 因为这里添加了最后一张图片6，当显示最后一张图片的时候，应该亮的是第一个导航
      if (index>=imgArr.length-1) {
        // 当是最后一张重复图片的时候
        index = 0;
        //此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
        //通过CSS将最后一张切换成第一张
        ulImgList.style.left = 0
      }

      // 先把所有的导航栏设置成默认颜色
      for (var i=0;i<aArr.length;i++) {
        aArr[i].style.backgroundColor = ''
      }
      // 点击了哪个，就把哪个颜色换掉
      aArr[index].style.backgroundColor = 'black'
    };

    autoChange();
    // 4. 开启自动切换轮播图片
    var timer = null
    function autoChange () {

      timer = setInterval(function() {
        index++
        // 判断当前是不是最后一张图片(2种方法)
        // index %=imgArr.length
        if (index>imgArr.length-1) {
          // 如果当前大于最后一张
          index = 0
        };
        // 设置ul列表的左偏
        // ulImgList.style.left = -520*index + 'px'
        move(ulImgList,'left',-520*index,20,function() {
          setA()
        });
          // 设置导航栏颜色的变化
          // setA()
        //设置选中的a

      },1000)
    };

  }
  </script>
  
</body>
</html>